@charset "utf-8";
.box1 {
    width: 500px;
    height: 500px;
    background-color: #31DEE1;
}


.box1 .item1 {
    height: 100px;
    width: 300px;
    background-color: #E1272A;
}



.box1 .item2 {
    width: 300px;
    height: 100px;
    background-color: #C3F116;
}
.box1 .item3 {
    width: 300px;
    height: 100px;
    background-color: #465B43;

}

.box2 {
    width: 500px;
    height: 500px;
    border-width: 1px;
    border-style: solid;
    background-color: #C1E3E0;
}
.box2 .item4 {
    width: 300px;
    height: 100px;
    background-color: #102221;
}
.box2 .item5 {
    height: 150px;
    width: 350px;
    background-color: #A22224;
}
.box2 .item6 {
    height: 200px;
    width: 400px;
    background-color: #9FE020;
}
.box3 {
    background-color: #92C6CC;
    width: 500px;
    height: 500px;
}
.box3 .item7 {
    width: 300px;
    height: 100px;
    background-color: #0FF494;
}
.box3 .item8 {
    background-color: #143BF0;
    width: 300px;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.box3 .item9 {
    width: 300px;
    height: 100px;
    background-color: #BDEF03;
}
.box4 {
    width: 500px;
    height: 500px;
    background-color: #C1C87C;
    border-style: solid;
}
.box4 .item10 {
    height: 100px;
    background-color: #EB1212;
    width: 33%;
    float: left;
}
.box4 .item11 {
    background-color: #210BE4;
    height: 100px;
    width: 33%;
    float: left;
}
.box4 .item12 {
    height: 100px;
    background-color: #16D325;
    width: 33%;
    float: right;
}
